<!--  -->
<template>
  <ElContainer class="h-screen">
    <ElAside
      v-show="store.state.editor.editMode === 'preview'"
      class="hidden-xs-only"
    >
      <LeftBar ref="leftBarRef"></LeftBar>
    </ElAside>

    <div class="hidden-sm-and-up">
      <ElDrawer
        custom-class="hidden-sm-and-up p-0"
        v-model="store.state.fileTree.flag"
        :with-header="false"
        direction="ltr"
        size="250px"
      >
        <LeftBar ref="leftBarRef"></LeftBar>
      </ElDrawer>
    </div>

    <ElContainer class="editor-container">
      <ElHeader>
        <TopBar></TopBar>
      </ElHeader>

      <ElMain :class="store.state.editor.editMode">
        <Editor></Editor>
      </ElMain>
    </ElContainer>
  </ElContainer>
</template>

<script setup lang="ts">
import { ElContainer, ElHeader, ElMain, ElAside, ElDrawer } from "element-plus"
import LeftBar from "./components/LeftBar/index.vue"
import TopBar from "./components/TopBar/index.vue"
import Editor from "./components/Editor/index.vue"
import { useStore } from "@/store"
import { websocket } from "./websocket"
import { onMounted, ref } from "vue-demi"
const store = useStore()
const leftBarRef = ref<InstanceType<typeof LeftBar>>()

onMounted(() => {
  websocket.connect("ws://119.29.66.70:3100", store.state.user.id)
  websocket.heartbeat()
  websocket.messageCallback = async (e) => {
    await store.dispatch("fileTree/getFile")
    if (store.state.markdown.id === e.fileId) {
      if (e.handle === "occupy") {
        store.commit("markdown/setOccupyUser", {
          name: e.name,
          fileId: e.fileId,
        })
      } else {
        store.commit("markdown/clearOccupyUser")
      }
    }
  }
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__body) {
  padding: 0;
}
.el-aside {
  border-right: 1px solid #ddd;
  width: 350px;
  overflow: hidden;
}
.el-main {
  border-right: 1px solid #ddd;
  padding: 0;
}
.preview {
  max-width: 1000px;
}
.editable {
  width: 100%;
}
</style>
